import { HsAdminSpin, HsAdminTablePage } from '@hs-admin/base-components'

import DataPropertyTopicon1 from '@/assets/home/DataProduceTopicon1.png'

import DataPropertyTopicon2 from '@/assets/home/DataPropertyTopicon2.png'

import DataPropertyTopicon3 from '@/assets/home/DataPropertyTopicon3.png'

import DataPropertyTopicon4 from '@/assets/home/DataPropertyTopicon4.png'

import DataPropertyTopicon5 from '@/assets/home/DataProduceTopicon7.png'

import DataPropertyTopicon6 from '@/assets/home/DataPropertyTopicon6.png'

import EchartsModule from '@/views/components/EchartsModule'

import dayjs from 'dayjs'

import {
  getHeadData_source,
  getHeadData_table,
  getHeadTag_rule,
  getdata_tables_quality,
  gettag_treeTables,
  getbasic_data_item,
  getindustry_map,
  getindustry_mapTables
} from '@/api/DataProperty'

import TrendNum from '@/views/components/TrendNum.tsx'

import Mytable from '@/views/components/Mytable/index'

import rightIcon from '@/assets/home/rightIcon.png'

import { formatNumber } from '@/utils/formatNumber'

import { chartFontSize } from '@/utils/rem.ts'

import { useEffect, useState } from 'react'

import React from 'react'

import './DataProperty.css'

import { usePage } from '@hs-admin/utils'
import { DataTable_frequency, DataTable_type, source_status, source_type } from '@/utils/type'

const DataProperty = () => {
  const echartsRef = React.createRef()

  //时间
  const [date, setDate] = useState('')

  //数据表状态监控
  const [tableData, setTableData]: any = useState([])

  //数据表更新状态监控
  const [monitordata, setmonitordata]: any = useState([])

  //数据资产透视
  const [dataPerspective, setdataPerspective] = useState<any>([])

  //数据表属性分布
  const [Attributedata, setAttributedata] = useState<any>([])

  //数据源来源类型分布
  const [DataSourTypececount, setDataSourceTypedatacount] = useState<any>(null)

  const [DataSourceTypedata, setDataSourceTypeData] = useState<any>([])

  //数据源完成状态分布
  const [DataSourStatusceount, setDataSourceStatusdatacount] = useState<any>(null)

  const [DataSourceStatusdata, setDataSourceStatusData] = useState<any>([])

  //表单质量分区间分布
  const [tablesQuality, settablesQuality]: any = useState([])

  const [activeInterfaceUrl, setInterfaceUrl] = useState('whole')

  const [tablesQualityData, settablesQualityData]: any = useState([])

  //月度数据质量提升top5表单
  const [DataTabletop5, setDataTabletop5] = useState<any>([])

  //月度数据质量末尾表单
  const [DataTablebottom, setDataTablebottom] = useState<any>([])
  //主题域数据量统计
  const [themedata, setthemedata] = useState<any>([])

  //图谱标签专题
  //产业数仓数据量统计

  const [loading, setloading] = useState(true)

  const [order_by, setorder_by] = useState('')

  const [order_direction, setorder_direction] = useState('')

  const [industryorder_by, setindustryorder_by] = useState('')

  const [industryorder_direction, setindustryorder_direction] = useState('')

  const [industry_domain, setindustry_domain]: Array<any> = useState([])

  const tag_treecolumns = [
    {
      title: '标签树',
      dataIndex: 'tag_tree_name',
      render: (text: any) => <span style={{ color: '#2080F0' }}>{text}</span>
    },
    {
      title: '标签(个)',
      dataIndex: 'tags_count',
      sorter: true,
      render: (text: any, row: any) => (
        <div className="flex items-center">
          <span className="mr-30px w-150px">{text}</span>
          <div className="flex items-center">
            <div className="mr-20px">
              <TrendNum label="本月" value={row.month_growth} />
            </div>
            <div>
              <TrendNum label="本周" value={row.week_growth} />
            </div>
          </div>
        </div>
      )
    },
    {
      title: '规则(个)',
      dataIndex: 'tag_rules_count',
      sorter: true,
      render: (text: any, row: any) => (
        <div className="flex items-center">
          <span className="mr-30px w-150px">{text}</span>
          <div className="flex items-center">
            <div className="mr-20px">
              <TrendNum label="本月" value={row.tag_rules_count_month_growth} />
            </div>
            <div>
              <TrendNum label="本周" value={row.tag_rules_count_week_growth} />
            </div>
          </div>
        </div>
      )
    },
    {
      title: '标签数据量(条)',
      sorter: true,
      dataIndex: 'total',
      render: (text: any, row: any) => (
        <div className="flex items-center">
          <span className="mr-30px w-150px">{text}</span>
          <div className="flex items-center">
            <div className="mr-20px">
              <TrendNum label="本月" value={row.tags_count_month_growth} />
            </div>
            <div>
              <TrendNum label="本周" value={row.tags_count_week_growth} />
            </div>
          </div>
        </div>
      )
    }
  ]

  const industrycolumns = [
    {
      title: '产业数仓名称',
      dataIndex: 'map_name',
      render: (text: any) => <span style={{ color: '#2080F0' }}>{text}</span>
    },
    {
      title: '所属领域',
      dataIndex: 'domain_name'
    },
    {
      title: '节点(个)',
      dataIndex: 'nodes_count',
      sorter: true
    },
    {
      title: '标签(个)',
      sorter: true,
      dataIndex: 'tags_count'
    },
    {
      title: '数据(条)',
      sorter: true,
      dataIndex: 'total'
    }
  ]

  const [tag_treeData, setTag_treeData] = useState<any>([])

  const [industry_mapData, setindustry_mapData] = useState<any>([])

  const { pagination: pagination1 }: { pagination: UsePageProps } = usePage(getTagTablesData)

  const { pagination: pagination2 }: { pagination: UsePageProps } = usePage(getindustryTablesData)

  //数据表专题
  //数据表更新频率分布
  const [Frequencydata, setFrequencyData] = useState<any>([])
  const [Frequencydatacount, setFrequencydatacount]: any = useState(null)
  //数据表类型分布
  const [DatatableTypedata, setDatatableTypedata] = useState<any>([])
  const [DatatableTypedatacount, setDatatableTypedatacount]: any = useState(null)

  //top数据
  const [topData, setTopData]: any = useState({
    数据源: {
      title1: {
        label: '数据源/个',
        value: 0,
        monthValue: 0,
        weekValue: 0,
        unit: '个'
      }
    },
    基础数据: {
      title1: {
        label: '数据表/张',
        value: 0,
        monthValue: 0,
        weekValue: 0,
        unit: '个'
      },
      title2: {
        label: '基础数据总量/万条',
        value: 0,
        monthValue: 0,
        weekValue: 0,
        unit: '万'
      }
    },
    标签: {
      title1: {
        label: '标签/个',
        value: 0,
        monthValue: 0,
        weekValue: 0,
        unit: '个'
      },
      title2: {
        label: '规则/个',
        value: 0,
        monthValue: 0,
        weekValue: 0,
        unit: '个'
      },
      title3: {
        label: '产业数据资产/万个',
        value: 0,
        monthValue: 0,
        weekValue: 0,
        unit: '万'
      }
    },
    图谱: {
      title1: {
        label: '图谱/个',
        value: 0,
        monthValue: 0,
        weekValue: 0,
        unit: '个'
      },
      title2: {
        label: '产业领域/个',
        value: 0,
        monthValue: 0,
        weekValue: 0,
        unit: '个'
      },
      title3: {
        label: '产业数仓资产/万个',
        value: 0,
        monthValue: 0,
        weekValue: 0,
        unit: '万'
      }
    }
  })

  const [industry_asset, setindustry_asset] = useState<any>({
    total: 0,
    month: 0,
    week: 0
  })

  const Top = () => {
    const topItems = [
      {
        label: '数据源',
        img: DataPropertyTopicon1,
        showrightIcon: true
      },
      {
        label: '基础数据',
        img: DataPropertyTopicon2,
        showrightIcon: true
      },
      {
        label: '标签',
        img: DataPropertyTopicon3,
        showrightIcon: true
      },
      {
        label: '图谱',
        img: DataPropertyTopicon4,
        showrightIcon: true
      },
      {
        label: '模型',
        img: DataPropertyTopicon5,
        showrightIcon: true
      },
      {
        label: '组件',
        img: DataPropertyTopicon6,
        showrightIcon: false
      }
    ]
    return (
      <div className="top flex">
        <div className="left w-14% h-460px mr-17px pt-23px px-24px">
          <div className="text-lg">资产总量/亿</div>
          <div className="text-4xl font-bold py-11px">{industry_asset.total / 100000000}</div>
          <div className="text-base mt-5px">
            <div className="mb-5px">
              <TrendNum label="本月" value={industry_asset.month} />
            </div>
            <div>
              <TrendNum label="本周" value={industry_asset.week} />
            </div>
          </div>
        </div>
        <div className="right w-86% h-460px flex py-20px px-30px">
          {topItems.map((item) => {
            return (
              <div key={item.label} className="flex">
                <img className="w-77px h-71px" src={item.img} alt="" />
                <div className="mt-12px ml-8px">
                  <div className="flex">
                    <div className="text-xl font-bold mb-14px">{item.label}</div>
                    {item.showrightIcon && <img className="w-53px h-9px mx-17px m-t10px ml-20px" src={rightIcon} alt="" />}
                  </div>
                  {topData[item.label]?.title1 && (
                    <div>
                      <div className="">{topData[item.label].title1.label}</div>
                      <div className="text-2xl font-bold">
                        {topData[item.label].title1.unit === '万' ? topData[item.label].title1.value / 10000 : topData[item.label].title1.value}
                      </div>
                      <div className="text-base mt-5px">
                        <div className="mb-5px">
                          <TrendNum label="本月" value={topData[item.label].title1.monthValue} />
                        </div>
                        <TrendNum label="本周" value={topData[item.label].title1.weekValue} />
                        <div></div>
                      </div>
                    </div>
                  )}
                  {topData[item.label]?.title2 && (
                    <div className="py-20px">
                      <div className="">{topData[item.label].title2.label}</div>
                      <div className="text-2xl font-bold">
                        {topData[item.label].title2.unit === '万' ? topData[item.label].title2.value / 10000 : topData[item.label].title2.value}
                      </div>
                      <div className="text-base mt-5px">
                        <div className="mb-5px">
                          <TrendNum label="本月" value={topData[item.label].title2.monthValue} />
                        </div>
                        <div>
                          <TrendNum label="本周" value={topData[item.label].title2.weekValue} />
                        </div>
                      </div>
                    </div>
                  )}
                  {topData[item.label]?.title3 && (
                    <div>
                      <div className="">{topData[item.label].title3.label}</div>
                      <div className="text-2xl font-bold">
                        {topData[item.label].title3.unit === '万' ? topData[item.label].title3.value / 10000 : topData[item.label].title3.value}
                      </div>
                      <div className="text-base mt-5px">
                        <div className="mb-5px">
                          <TrendNum label="本月" value={topData[item.label].title3.monthValue} />
                        </div>
                        <div>
                          <TrendNum label="本周" value={topData[item.label].title3.weekValue} />
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            )
          })}
        </div>
      </div>
    )
  }

  //标签专题
  const sorter = (e: any) => {
    if (e.column) {
      setorder_by(e.column.dataIndex)
      if (e.order === 'ascend') {
        setorder_direction('asc')
      } else setorder_direction('desc')
    } else {
      setorder_by('')
      setorder_direction('')
    }
  }

  //图谱专题
  const industrysorter = (e: any) => {
    if (e.column) {
      setindustryorder_by(e.column.dataIndex)
      if (e.order === 'ascend') {
        setindustryorder_direction('asc')
      } else setindustryorder_direction('desc')
    } else {
      setindustryorder_by('')
      setindustryorder_direction('')
    }
  }

  //数据表专题

  const DatatableModule = () => {
    const configoptions = (_type: any) => {
      const allCount = tableData.reduce((pre: any, cur: any) => pre + cur.count, 0)

      let percent: any = 0

      tableData.forEach((element: any) => {
        if (element.status === _type) percent = parseFloat(((element.count / allCount) * 100).toFixed(2))
      })
      const options = {
        title: {
          text: percent + '%',
          subtext: _type === 1 ? '规划中' : _type === 2 ? '可用' : '废弃',
          left: '40%',
          top: '30%',
          textAlign: 'center',
          itemGap: 6,
          textStyle: {
            fontSize: chartFontSize(28),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          },
          subtextStyle: {
            fontSize: chartFontSize(16),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          }
        },
        tooltip: {
          trigger: 'item'
        }
      }
      return options
    }

    const configSeriesData = (type: any) => {
      const allCount = tableData.reduce((pre: any, cur: any) => (cur.status !== type ? pre + cur.count : pre), 0)

      const Data: any = [
        {
          value: allCount,
          name: '总数',
          itemStyle: { color: type == 2 ? 'rgba(31, 202, 201, 0.24)' : type == 1 ? 'rgba(32,128,240,0.24)' : 'rgba(87,116,139,0.24)' }
        }
      ]

      tableData.forEach((element: any) => {
        if (element.status === type)
          Data.unshift({ value: element.count, itemStyle: { color: type == 2 ? '#1FCAC9' : type == 1 ? '#2080F0' : '#57748B' } })
      })

      const seriesData: any = [
        {
          type: 'pie',
          radius: ['60%', '70%'],
          center: ['40%', '40%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: Data
        }
      ]
      return seriesData
    }

    const getcountTotal: any = (type: string) => {
      let countTotal = 0
      tableData.forEach((element: any) => {
        if (element.status === type) countTotal = element.count
      })
      return countTotal
    }

    //数据表更新频率分布
    const configDatatableFrequencyOptions = (type: string) => {
      let count = null
      let data: Array<any> = []
      if (type === 'frequency') {
        count = Frequencydatacount
        data = Frequencydata
      } else {
        count = DatatableTypedatacount
        data = DatatableTypedata
      }
      const DatatableFrequencyOptions = {
        title: {
          text: count,
          subtext: '总量/个',
          left: '18%',
          top: '35%',
          textAlign: 'center',
          itemGap: 6,
          textStyle: {
            fontSize: chartFontSize(28),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          },
          subtextStyle: {
            fontSize: chartFontSize(16),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          show: true,
          top: chartFontSize(type === 'frequency' ? 60 : 120),
          itemGap: 16,
          right: chartFontSize(-10),
          orient: 'vertical',
          icon: 'circle',
          textStyle: {
            rich: {
              name: {
                fontSize: chartFontSize(16),
                width: chartFontSize(177),
                color: '#57748B'
              },
              percent: {
                width: chartFontSize(93),
                fontSize: chartFontSize(16),
                align: 'right',
                color: '#32393F'
              },
              value: {
                fontSize: chartFontSize(16),
                align: 'right',
                color: '#32393F'
              }
            }
          },
          formatter(name: string) {
            return `{name|${name}} {percent|${data.find((item: any) => item?.name === name)?.percent ?? '-'} %} {value|${
              data.find((item: any) => item?.name === name)?.value ?? '-'
            }个} `
          }
        }
      }
      return DatatableFrequencyOptions
    }

    const configDatatableFrequencySeriesData = (type: string) => {
      let data = null
      if (type === 'frequency') {
        data = Frequencydata
      } else data = DatatableTypedata
      const DatatableFrequencySeriesData: any = [
        {
          type: 'pie',
          radius: ['40%', '48%'],
          center: ['18%', '45%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 8
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
      return DatatableFrequencySeriesData
    }

    //数据表更新状态监控
    const configmonitoroptions = (_type: boolean) => {
      const allCount = monitordata.reduce((pre: any, cur: any) => pre + cur.count, 0)

      let percent: any = 0

      monitordata.forEach((element: any) => {
        if (element.is_normal_updated === _type) percent = parseFloat(((element.count / allCount) * 100).toFixed(2))
      })
      const monitoroptions = {
        title: {
          text: percent + '%',
          subtext: _type ? '正常' : '异常',
          left: '40%',
          top: '30%',
          textAlign: 'center',
          itemGap: 6,
          textStyle: {
            fontSize: chartFontSize(28),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          },
          subtextStyle: {
            fontSize: chartFontSize(16),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          }
        },
        tooltip: {
          trigger: 'item'
        }
      }
      return monitoroptions
    }

    const configmonitorseriesData = (_type: boolean) => {
      const allCount = monitordata.reduce((pre: any, cur: any) => (cur.is_normal_updated !== _type ? pre + cur.count : pre), 0)

      const Data: any = [
        {
          value: allCount,
          name: '总数',
          itemStyle: { color: _type ? 'rgba(31,202,201,0.24)' : 'rgba(230,93,56,0.24)' }
        }
      ]

      monitordata.forEach((element: any) => {
        if (element.is_normal_updated === _type) Data.unshift({ value: element.count, itemStyle: { color: _type ? '#1FCAC9' : '#E65D38' } })
      })
      const monitorseriesData: any = [
        {
          type: 'pie',
          radius: ['50%', '60%'],
          center: ['40%', '40%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: Data
        }
      ]
      return monitorseriesData
    }

    const getmonitorcountTotal: any = (type: boolean) => {
      let countTotal = 0
      monitordata.forEach((element: any) => {
        if (element.is_normal_updated === type) countTotal = element.count
      })
      return countTotal
    }

    //数据表属性分布

    const configAttributeoptions = (type: boolean) => {
      const allCount = Attributedata.reduce((pre: any, cur: any) => pre + cur.count, 0)

      let percent: any = 0

      Attributedata.forEach((element: any) => {
        if (element.is_key_focus === type) percent = parseFloat(((element.count / allCount) * 100).toFixed(2))
      })
      const attributeoptions = {
        title: {
          text: percent + '%',
          subtext: type ? '重点表单' : '非重点表单',
          left: '40%',
          top: '40%',
          textAlign: 'center',
          itemGap: 6,
          textStyle: {
            fontSize: chartFontSize(28),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          },
          subtextStyle: {
            fontSize: chartFontSize(16),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          }
        },
        tooltip: {
          trigger: 'item'
        }
      }
      return attributeoptions
    }

    const configAttributeSeriesData = (type: boolean) => {
      const allCount = Attributedata.reduce((pre: any, cur: any) => (cur.is_key_focus !== type ? pre + cur.count : pre), 0)

      const Data: any = [
        {
          value: allCount,
          name: '总数',
          itemStyle: { color: type ? 'rgba(31,202,201,0.24)' : 'rgba(32,128,240,0.24)' }
        }
      ]

      Attributedata.forEach((element: any) => {
        if (element.is_key_focus === type) Data.unshift({ value: element.count, itemStyle: { color: type ? '#1FCAC9' : '#2080F0' } })
      })
      const attributeseriesData: any = [
        {
          type: 'pie',
          radius: ['70%', '80%'],
          center: ['40%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: Data
        }
      ]

      return attributeseriesData
    }

    const getAttributecountTotal: any = (type: boolean) => {
      let countTotal = 0
      Attributedata.forEach((element: any) => {
        if (element.is_key_focus === type) countTotal = element.count
      })
      return countTotal
    }

    const getAttributeScore: any = (type: boolean) => {
      let Score = 0
      Attributedata.forEach((element: any) => {
        if (element.is_key_focus === type) Score = element.avg_score
      })
      return Score
    }

    //表单质量分区间分布
    const interfaceUrl: any = {
      whole: {
        label: '全部'
      },
      keynote: {
        label: '重点'
      },
      Nonfocus: {
        label: '非重点'
      }
    }

    const getInterfaceUrl = (_e: any, key: any) => {
      setInterfaceUrl(key)

      let array: Array<any> = []

      if (key === 'keynote') {
        array = tablesQuality.filter((item: any) => item.is_key_focus === true)
      }
      if (key === 'Nonfocus') {
        array = tablesQuality.filter((item: any) => item.is_key_focus === false)
      }
      if (key === 'whole') {
        array = tablesQuality.filter((item: any) => item.is_key_focus === null)
      }

      settablesQualityData(array)
    }

    const configInterfaceoptions = (_type: any) => {
      const allCount = tablesQualityData.reduce((pre: any, cur: any) => pre + cur.count, 0)

      let percent: any = 0

      let newValue: number = 0
      tablesQualityData.forEach((element: any) => {
        if (element.score_group === _type) {
          newValue += element.count
        }
      })
      percent = parseFloat(((newValue / allCount) * 100).toFixed(2))

      const options = {
        title: {
          text: percent + '%',
          subtext: _type === '80分以上' ? '80+' : _type === '60~80分' ? '60~80' : '60-',
          left: '40%',
          top: '30%',
          textAlign: 'center',
          itemGap: 6,
          textStyle: {
            fontSize: chartFontSize(28),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          },
          subtextStyle: {
            fontSize: chartFontSize(16),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          }
        },
        tooltip: {
          trigger: 'item'
        }
      }
      return options
    }

    const configInterfaceSeriesData = (type: any) => {
      const allCount = tablesQualityData.reduce((pre: any, cur: any) => (cur.score_group !== type ? pre + cur.count : pre), 0)

      const Data: any = [
        {
          value: allCount,
          name: '总数',
          itemStyle: {
            color: type === '80分以上' ? 'rgba(31, 202, 201, 0.24)' : type === '60~80分' ? 'rgba(32, 128, 240, 0.24)' : 'rgba(87, 116, 139, 0.24)'
          }
        }
      ]

      let newValue: number = 0
      tablesQualityData.forEach((element: any) => {
        if (element.score_group === type) {
          newValue += element.count
        }
      })
      Data.unshift({ value: newValue, itemStyle: { color: type === '80分以上' ? '#1FCAC9' : type === '60~80分' ? '#2080F0' : '#57748B' } })

      const seriesData: any = [
        {
          type: 'pie',
          radius: ['60%', '70%'],
          center: ['40%', '40%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: Data
        }
      ]
      return seriesData
    }

    const getInterfacecountTotal: any = (type: string) => {
      let countTotal = 0
      tablesQualityData.forEach((element: any) => {
        if (element.score_group === type) countTotal += element.count
      })
      return countTotal
    }

    //月度数据质量提升TOP5表单
    const DataTablecolumns = [
      {
        title: '数据表',
        dataIndex: 'cn_table_name',
        ellipsis: true,
        render: (text: any) => <span style={{ color: '#2080F0' }}>{text}</span>
      },
      {
        title: '当前质量分',
        dataIndex: 'score'
      },
      {
        title: '生产负责人',
        dataIndex: 'production_leader'
      }
    ]
    const getDataTableData = (type: string) => {
      let array: Array<any> = []
      if (type === 'TOP5') {
        array = DataTabletop5
      } else array = DataTablebottom
      return array
    }

    const dataPerspectivecolumns = [
      {
        title: '数仓层级',
        dataIndex: 'layer',
        render: (text: any) => <span style={{ color: '#2080F0' }}>{text}</span>,
        ellipsis: true
      },

      {
        title: '数据表/张',
        dataIndex: 'count'
      }
    ]

    const themedatacolumns = [
      {
        title: '主题域',
        dataIndex: 'topic',
        render: (text: any) => <span style={{ color: '#2080F0' }}>{text}</span>,
        ellipsis: true
      },

      {
        title: '包含数据表/张',
        dataIndex: 'count'
      }
    ]
    return (
      <div className="DatatableModule p-26px">
        <div className="text-lg font-bold text-blue cursor-pointer" onClick={() => open('https://dataorder.hsmap.com/planningOverview/dataSheet')}>
          数据表专题
        </div>
        <div className="flex mt-24px h-100%">
          <div className="w-33.33% h-100%">
            <div className="h-20% w-100%">
              <div>
                <div className="flex justify-between items-center">
                  <div className="text-base font-bold">数据表状态监控</div>
                  <div className="black-xs">累计时间：{date}</div>
                </div>
              </div>
              <div className="h-100% flex items-center justify-around ml-40px">
                <div className="w-33.33% h-100%">
                  <EchartsModule onRef={echartsRef} seriesData={configSeriesData(2)} options={configoptions(2)}></EchartsModule>
                  <div className="ml-25px black-xs mt--90px">共计 {getcountTotal(2)}个</div>
                </div>
                <div className="w-33.33% h-100%">
                  <EchartsModule onRef={echartsRef} seriesData={configSeriesData(1)} options={configoptions(1)}></EchartsModule>
                  <div className="ml-25px black-xs mt--90px">共计 {getcountTotal(1)}个</div>
                </div>
                <div className="w-33.33% h-100%">
                  <EchartsModule onRef={echartsRef} seriesData={configSeriesData(-1)} options={configoptions(-1)}></EchartsModule>
                  <div className="ml-25px black-xs mt--90px">共计 {getcountTotal(-1)}个</div>
                </div>
              </div>
            </div>
            <div className="h-30%">
              <div className="h-100%">
                <div className="text-base font-bold">数据表更新频率分布</div>
                <EchartsModule
                  onRef={echartsRef}
                  options={configDatatableFrequencyOptions('frequency')}
                  seriesData={configDatatableFrequencySeriesData('frequency')}></EchartsModule>
              </div>
            </div>
            <div className="h-20%">
              <div className="flex justify-between items-center">
                <div className="text-base font-bold">数据表更新状态监控</div>
                <div className="black-xs">累计时间：{date}</div>
              </div>
              <div className="h-100% flex items-center justify-around ml-40px">
                <div className="w-50% h-100%">
                  <EchartsModule onRef={echartsRef} seriesData={configmonitorseriesData(true)} options={configmonitoroptions(true)}></EchartsModule>
                  <div className="ml-50px black-xs mt--80px">共计 {getmonitorcountTotal(true)}个</div>
                </div>
                <div className="w-50% h-100%">
                  <EchartsModule onRef={echartsRef} seriesData={configmonitorseriesData(false)} options={configmonitoroptions(false)}></EchartsModule>
                  <div className="ml-50px black-xs mt--80px">共计 {getmonitorcountTotal(false)}个</div>
                </div>
              </div>
            </div>
            <div className="h-30%">
              <div className="h-100%">
                <div className="text-base font-bold">数据表类型分布</div>
                <EchartsModule
                  onRef={echartsRef}
                  options={configDatatableFrequencyOptions('type')}
                  seriesData={configDatatableFrequencySeriesData('type')}></EchartsModule>
              </div>
            </div>
          </div>
          <div className="w-33.33% h-100% mx-60px">
            <div className="h-20%">
              <div className="flex justify-between items-center">
                <div className="text-base font-bold">数据表属性分布</div>
                <div className="black-xs">累计时间：{date}</div>
              </div>
              <div className="h-80% flex items-center justify-around ml-40px">
                <div className="w-50% h-100% flex items-center">
                  <div className="h-100% w-65%">
                    <EchartsModule
                      onRef={echartsRef}
                      seriesData={configAttributeSeriesData(true)}
                      options={configAttributeoptions(true)}></EchartsModule>
                    <div className="ml-30px black-xs mt--35px">共计 {getAttributecountTotal(true)}个</div>
                  </div>
                  <div className="w-35% mt--10px">
                    <div className="text-base">平均质量分</div>
                    <div className="text-2xl font-bold">{formatNumber(getAttributeScore(true))}</div>
                  </div>
                </div>
                <div className="w-50% h-100% flex items-center ml-30px">
                  <div className="h-100% w-70%">
                    <EchartsModule
                      onRef={echartsRef}
                      seriesData={configAttributeSeriesData(false)}
                      options={configAttributeoptions(false)}></EchartsModule>
                    <div className="ml-30px black-xs mt--35px">共计 {getAttributecountTotal(false)}个</div>
                  </div>
                  <div className="w-35% mt--10px">
                    <div className="text-base">平均质量分</div>
                    <div className="text-2xl font-bold">{formatNumber(getAttributeScore(false))}</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="h-20%">
              <div className="flex justify-between items-center">
                <div className="text-base font-bold">表单质量分区间分布</div>
                <div className="switch-tab">
                  {Object.keys(interfaceUrl).map((key, index) => (
                    <span key={index} className={activeInterfaceUrl === key ? 'active' : ''} onClick={(e: any) => getInterfaceUrl(e, key)}>
                      {interfaceUrl[key].label}
                    </span>
                  ))}
                </div>
              </div>
              <div className="h-80% flex items-center justify-around ml-40px">
                <div className="w-33.33% h-100%">
                  <EchartsModule
                    onRef={echartsRef}
                    seriesData={configInterfaceSeriesData('80分以上')}
                    options={configInterfaceoptions('80分以上')}></EchartsModule>
                  <div className="ml-25px black-xs mt--60px">共计 {getInterfacecountTotal('80分以上')}个</div>
                </div>
                <div className="w-33.33% h-100%">
                  <EchartsModule
                    onRef={echartsRef}
                    seriesData={configInterfaceSeriesData('60~80分')}
                    options={configInterfaceoptions('60~80分')}></EchartsModule>
                  <div className="ml-25px black-xs mt--60px">共计 {getInterfacecountTotal('60~80分')}个</div>
                </div>
                <div className="w-33.33% h-100%">
                  <EchartsModule
                    onRef={echartsRef}
                    seriesData={configInterfaceSeriesData('60分以下')}
                    options={configInterfaceoptions('60分以下')}></EchartsModule>
                  <div className="ml-25px black-xs mt--60px">共计 {getInterfacecountTotal('60分以下')}个</div>
                </div>
              </div>
            </div>
            <div className="h-30%">
              <div className="flex justify-between items-center">
                <div className="text-base font-bold">月度数据质量提升TOP5表单</div>
                <div className="black-xs">累计时间：{date}</div>
              </div>
              <div className="h-80% overflow-auto">
                <Mytable columns={DataTablecolumns} rowKey="id" data={getDataTableData('TOP5')} />
              </div>
            </div>
            <div className="h-30%">
              <div className="flex justify-between items-center">
                <div className="text-base font-bold">月度数据质量末尾表单</div>
                <div className="black-xs">累计时间：{date}</div>
              </div>
              <div className="h-80% overflow-auto">
                <Mytable columns={DataTablecolumns} rowKey="id" data={getDataTableData('bottom5')} />
              </div>
            </div>
          </div>
          <div className="w-33.33%">
            <div className="h-50%">
              <div className="">
                <div className="text-base font-bold">数据资产透视</div>
                <div className="overflow-auto">
                  <Mytable columns={dataPerspectivecolumns} rowKey="layer" data={dataPerspective} />
                </div>
              </div>
            </div>
            <div className="h-50%">
              <div className="h-100%">
                <div className="text-base font-bold">主题域数据量统计</div>
                <div className="overflow-auto h-84%">
                  <Mytable columns={themedatacolumns} rowKey="topic" data={themedata} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  //数据源专题
  const DataSourceModule = () => {
    //数据源来源分布
    const configDatasourceOptions = (type: string) => {
      let count = 0
      let data: Array<any> = []
      if (type === 'status_agg') {
        count = DataSourStatusceount
        data = DataSourceStatusdata
      } else {
        count = DataSourTypececount
        data = DataSourceTypedata
      }
      const DataSourceTypeOptions = {
        title: {
          text: count,
          subtext: '总量/个',
          left: '20%',
          top: '27%',
          textAlign: 'center',
          itemGap: 6,
          textStyle: {
            fontSize: chartFontSize(28),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          },
          subtextStyle: {
            fontSize: chartFontSize(16),
            color: '#2C2C2C',
            fontFamily: 'MicrosoftYaHei'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          show: true,
          top: chartFontSize(62),
          itemGap: 16,
          right: chartFontSize(100),
          orient: 'vertical',
          icon: 'circle',
          textStyle: {
            rich: {
              name: {
                fontSize: chartFontSize(16),
                width: chartFontSize(177),
                color: '#57748B'
              },
              percent: {
                width: chartFontSize(93),
                fontSize: chartFontSize(16),
                align: 'right',
                color: '#32393F'
              },
              value: {
                fontSize: chartFontSize(16),
                align: 'right',
                color: '#32393F'
              }
            }
          },
          formatter(name: string) {
            return `{name|${name}} {percent|${data.find((item: any) => item?.name === name)?.percent ?? '-'} %} {value|${
              data.find((item: any) => item?.name === name)?.value ?? '-'
            }个} `
          }
        }
      }
      return DataSourceTypeOptions
    }

    const configDataSourceSeriesData = (type: string) => {
      let data: Array<any> = []
      if (type === 'status_agg') {
        data = DataSourceStatusdata
      } else {
        data = DataSourceTypedata
      }

      const DataSourceSeriesData: any = [
        {
          type: 'pie',
          radius: ['40%', '30%'],
          center: ['20%', '32%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 8,
            borderColor: '#fff',
            borderWidth: 8
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
      return DataSourceSeriesData
    }

    return (
      <div className="DataSourceModule p-26px">
        <div className="text-lg font-bold">数据源专题</div>
        <div className="flex w-100% mt-24px h-100%">
          <div className="w-100% flex">
            <div className="w-100%">
              <div className="h-100%">
                <div className="text-base font-bold">数据源来源类型分布</div>
                <EchartsModule
                  onRef={echartsRef}
                  options={configDatasourceOptions('source_type_agg')}
                  seriesData={configDataSourceSeriesData('source_type_agg')}></EchartsModule>
              </div>
            </div>
            <div className="w-100%">
              <div className="h-100%">
                <div className="text-base font-bold">数据源完成状态分布</div>
                <EchartsModule
                  onRef={echartsRef}
                  options={configDatasourceOptions('status_agg')}
                  seriesData={configDataSourceSeriesData('status_agg')}></EchartsModule>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

  useEffect(() => {
    getHeadData_source().then((res: any) => {
      setTopData((value: any) => {
        value.数据源.title1.value = res.total
        value.数据源.title1.monthValue = res.month_week_growth.month
        value.数据源.title1.weekValue = res.month_week_growth.week
        return { ...value }
      })
      //数据源来源类型分布
      const sourceallCount = res.source_type_agg.reduce((pre: any, cur: any) => pre + cur.count, 0)
      res.source_type_agg.forEach((item: any) => {
        item.value = item.count
        item.name = source_type(item.source_type)
        item.percent = parseFloat(((item.count / sourceallCount) * 100).toFixed(2))
        setDataSourceTypedatacount(sourceallCount)
      })
      setDataSourceTypeData(res.source_type_agg)

      //数据源完成状态分布
      const sourcstatuseallCount = res.status_agg.reduce((it: any, cur: any) => it + cur.count, 0)
      res.status_agg.forEach((its: any) => {
        its.value = its.count
        its.name = source_status(its.status)
        its.percent = parseFloat(((its.count / sourcstatuseallCount) * 100).toFixed(2))
        setDataSourceStatusdatacount(sourcstatuseallCount)
      })
      setDataSourceStatusData(res.status_agg)
    })
    getHeadData_table().then((res: any) => {
      setTopData((value: any) => {
        value.基础数据.title1.value = res.total
        value.基础数据.title1.monthValue = res.month_week_growth.month
        value.基础数据.title1.weekValue = res.month_week_growth.week
        return { ...value }
      })
      //数据表状态监控
      setTableData(res.status_agg)
      //数据表更新频率分布
      const allCount = res.update_freq_agg.reduce((pre: any, cur: any) => pre + cur.count, 0)
      res.update_freq_agg.forEach((item: any) => {
        item.value = item.count
        item.name = DataTable_frequency(item.update_freq)
        item.percent = parseFloat(((item.count / allCount) * 100).toFixed(2))
        setFrequencydatacount(allCount)
      })
      setFrequencyData(res.update_freq_agg)

      //数据表类型分布
      const sum = res.table_type_agg.reduce((old: any, newValue: any) => old + newValue.count, 0)
      res.table_type_agg.forEach((its: any) => {
        its.value = its.count
        its.name = DataTable_type(its.table_type)
        its.percent = parseFloat(((its.count / sum) * 100).toFixed(2))
        setDatatableTypedatacount(sum)
      })
      setDatatableTypedata(res.table_type_agg)

      //数据表更新状态监控
      setmonitordata(res.is_normal_updated_agg)

      //数据资产透视
      setdataPerspective(res.layer_agg)

      //主题域数量统计
      setthemedata(res.topic_agg)

      //数据表属性分布
      setAttributedata(res.is_key_focus_agg)
    })
    getHeadTag_rule().then((res: any) => {
      setTopData((value: any) => {
        value.标签.title1.value = res.tag.total
        value.标签.title1.monthValue = res.tag.month
        value.标签.title1.weekValue = res.tag.week
        value.标签.title2.value = res.online_rule.total
        value.标签.title2.monthValue = res.online_rule.month
        value.标签.title2.weekValue = res.online_rule.week
        value.标签.title3.value = res.tag_result.total
        value.标签.title3.monthValue = res.tag_result.month
        value.标签.title3.weekValue = res.tag_result.week
        return { ...value }
      })
    })
    //表单质量分区间分布
    getdata_tables_quality().then((res: any) => {
      const arr = res.quality_aggs.filter((item: any) => item.is_key_focus === null) //表单质量分区间分布全部
      settablesQuality(res.quality_aggs)
      settablesQualityData(arr)
      setDataTabletop5(res.top5)
      setDataTablebottom(res.bottom5)
    })

    getbasic_data_item().then((_res: any) => {
      setTopData((value: any) => {
        value.基础数据.title2.value = _res.data_count
        value.基础数据.title2.monthValue = _res.month_incr_count
        value.基础数据.title2.weekValue = _res.week_incr_count
        return { ...value }
      })
    })

    getindustry_map().then((res: any) => {
      setTopData((value: any) => {
        value.图谱.title1.value = res.industry_map.total
        value.图谱.title1.monthValue = res.industry_map.month
        value.图谱.title1.weekValue = res.industry_map.week
        value.图谱.title2.value = res.industry_domain.total
        value.图谱.title2.monthValue = res.industry_domain.month
        value.图谱.title2.weekValue = res.industry_domain.week
        value.图谱.title3.value = res.industry_asset.total
        value.图谱.title3.monthValue = res.industry_asset.month
        value.图谱.title3.weekValue = res.industry_asset.week
        return { ...value }
      })
      res.industry_domain_agg.total = res.industry_domain_agg.reduce((pre: any, cur: any) => pre + cur.total, 0)
      setindustry_domain(res.industry_domain_agg)
    })
    const nowTime = dayjs()

    setDate(nowTime.format('YYYY-MM-DD'))
  }, [])

  useEffect(() => {
    propertycount()
  }, [topData])

  //计算资产总量
  const propertycount = () => {
    const obj = {
      total: 0,
      month: 0,
      week: 0
    }
    Object.keys(topData).forEach((key: any) => {
      Object.keys(topData[key]).forEach((item: any) => {
        obj.total += topData[key][item].value
        obj.month += topData[key][item].monthValue
        obj.week += topData[key][item].weekValue
      })
    })
    setindustry_asset(obj)
  }

  useEffect(() => {
    order_direction && getTagTablesData()
  }, [order_direction])
  useEffect(() => {
    industryorder_direction && getindustryTablesData()
  }, [industryorder_direction])
  //标签专题
  async function getTagTablesData() {
    setloading(true)
    const param: object = {
      order_by: order_by || null, //排序字段
      order_direction: order_direction || null, //排序方向
      page: pagination1.current,
      page_size: pagination1.pageSize
    }
    const res = await gettag_treeTables(param)
    setTag_treeData(res.items)
    setloading(false)
    return res
  }
  //图谱专题产业数仓数据量统计
  async function getindustryTablesData() {
    setloading(true)
    const param: object = {
      order_by: industryorder_by || null, //排序字段
      order_direction: industryorder_direction || null, //排序方向
      page: pagination2.current,
      page_size: pagination2.pageSize
    }
    const res = await getindustry_mapTables(param)
    setindustry_mapData(res.items)
    setloading(false)
    return res
  }

  //打开页面
  const open = (path: string) => {
    window.open(`${path}`, '_blank')
  }

  return (
    <div className="DataProperty-page-wrapper">
      <Top />
      <div className="GraphTitleModule mt-24px p-26px">
        <span className="text-lg font-bold text-blue cursor-pointer" onClick={() => open('https://pivot.hsmap.com/map/warehouseStatistic')}>
          图谱标签专题
        </span>
        <div className="flex mt-24px h-100%">
          <div className="w-30% h-100% ">
            <div className="h-100%">
              <div className="flex justify-between mb-32px">
                <div className="font-bold text-base black-xs">产业领域数据量统计</div>
                <div className="black-xs text-base black-xs">累计时间：{date}</div>
              </div>
              <div className="flex justify-center">
                <div className="Graphleftcard text-lg font-bold flex items-center justify-center mt-15px">数据总量：{industry_domain.total}条</div>
              </div>
              <div className="pt-20px flex flex-wrap overflow-auto h-70%">
                {industry_domain.map((item: any, index: any) => (
                  <div key={index} className="GraphleftcardItems mr-10px mb-10px">
                    <div>
                      <div className="text-black flex items-center justify-center">{item.domain_name}</div>
                      <div className="flex items-center justify-center">
                        <span className="text-xl font-bold">{item.total}</span>条
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="w-70% h-100% px-60px">
            <div className="h-100%">
              <div className="flex justify-between mb-32px">
                <div className="font-bold text-base black-xs">产业数仓数据量统计</div>
                <div className="black-xs text-base">累计时间：{date}</div>
              </div>
              {loading && <HsAdminSpin />}
              <div className="h-100% w-100%">
                <HsAdminTablePage
                  showSorterTooltip={false}
                  id="industryDataTable"
                  columns={industrycolumns}
                  rowKey={(record: any) => `${record.map_id}${record.domain_id}`}
                  dataSource={industry_mapData}
                  pagination={pagination2}
                  scroll={{ y: 500, x: 800 }}
                  onChange={(_a: any, _b: any, sortOrder: any) => industrysorter(sortOrder)}
                  size="small"></HsAdminTablePage>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="GraphTitleModule mt-24px p-26px">
        <span className="text-lg font-bold text-blue cursor-pointer" onClick={() => open('https://pivot.hsmap.com/tag/tagStatistics')}>
          标签专题
        </span>
        <div className="mt-24px h-100%">
          <div className="w-100% h-100%">
            <div className="h-100%">
              <div className="flex justify-between mb-32px">
                <div className="font-bold text-base black-xs">标签规则统计</div>
                <div className="black-xs text-base">累计时间：{date}</div>
              </div>
              {loading && <HsAdminSpin />}
              <div className="h-100% w-100%">
                <HsAdminTablePage
                  showSorterTooltip={false}
                  id="industryDataTable"
                  columns={tag_treecolumns}
                  rowKey="tag_tree_id"
                  dataSource={tag_treeData}
                  pagination={pagination1}
                  scroll={{ y: 500, x: 800 }}
                  onChange={(_a: any, _b: any, sortOrder: any) => sorter(sortOrder)}
                  size="small"></HsAdminTablePage>
              </div>
            </div>
          </div>
        </div>
      </div>
      <DatatableModule />
      <DataSourceModule />
    </div>
  )
}

export default DataProperty
